<template>
    <ui-popup class="popup-area-wrap" :status="status" @close="popupClose">
        <div class="popup-area">
            <div class="area-main">
                <p class="header">切换国家频道</p>
                <div class="list" @touchmove.capture.stop="">
                    <ul>
                        <li v-for="(item,index) in list.area" :class="{'on': activeName.indexOf(item.short_name) !== -1 }" :key="item.short_name" @click="chooseArea(item,index)"><span>{{item.name}}</span><i class="uicon uicon-choose"></i></li>
                    </ul>
                </div>
                <!-- <a href="javascript:;" class="done" @click="done">确定</a> -->
            </div>
            <a href="javascript:void(0);" class="close" @click="popupClose"></a>
        </div>
    </ui-popup>
</template>
<script>
import popup from './popup.vue'
export default {
    name:'popup-area',
    props:{
        status:{
            type:Boolean,
            default:false
        },
        // active:{
        //     type:Object,
        //     default:[]
        // },
        list:{
            type:Object,
            default:[]
        }
    },
    data(){
        return {
            item:{},
            activeName:[],
            areaList:[],
            choose:'',

        }
    },
    watch:{
        status(n,o){
            if(n){
                this.activeName = [];
                // this.item = this.active;
                this.list.my.forEach(item=>{
                    if(item.type == 'area') {
                        this.activeName.push(item.short_name);
                    }
                })
            }
        }
        
    },
    components:{
        [popup.name]:popup
    },
    mounted(){
        
    },
    methods:{
        popupClose(){
            this.$emit('close')
        },
        chooseArea(item,index){
            let idx = this.activeName.indexOf(item.short_name);
            if(idx === -1){
                let oidx = this.activeName.indexOf(this.item.short_name);
                this.activeName.splice(oidx,1);
                this.activeName.push(item.short_name);
                this.$utils.caches.set('country', item.short_name, 'storage')
                this.$emit('done',item);
            }
        }
    }
}
</script>
<style lang="less">
.popup-area-wrap,.popup-area,.area-main {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.area-main {
    z-index:2;
    width:580px;
    height:785px;
    background-color:#fff;
    border-radius:8px;
    overflow: hidden;
    .header,
    .list li,
    .done {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header,.list {
        width:100%;
    }
    .header {
        font-size:36px;
        color:#282828;
        height:111px;
        border-bottom:1px solid #eee;
    }
    .list {
        position:relative;
        flex:1;
        font-size:32px;
        color:#666666;
        overflow: hidden;
        .on {
            color:#e64a19;
            i {
                display:block;
            }
        }
        box-shadow: inset 0 -35px 35px 0 rgba(255,255,255,1);
        // &::after {
        //     content:'';
        //     position:absolute;
        //     bottom:0;
        //     left:0;
        //     width:100%;
        //     height:70px;
        //     background-image:linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0));
        // }
        ul {
            height: 100%;
            overflow: auto;
            -webkit-overflow-scrolling : touch;  
        }
        li {
            position:relative;
            height:90px;
            box-sizing: content-box;
            span {
                position:relative;
                z-index:-1;
            }
            & + li {
                border-top:1px solid #eee;
            }

            i {
                display: none;
                position: absolute;
                right:30px;
            }
        }
    }
    .done {
        margin:20px auto;
        font-size:36px;
        color:#fff;
        width:320px;
        height:78px;
        border-radius: 8px;
        background-color:#e64a19;
    }

    
}
.popup-area {
    position:relative;
    z-index:999;

    .close {
        position:relative;
        margin-top:36px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        width:60px;
        height:60px;
        border-radius:50%;
        border:4px solid #fff;
        transform: rotate(45deg);
        &::before,
        &::after {
            content: "";
            position: absolute;
            top:50%;
            left:50%;
            background-color:#fff;
            border-radius:10px;
            transform: translate(-50%,-50%)
        }

        &::before {
            width:60%;
            height:4px;
        }

        &::after {
            width:4px;
            height:60%;;
            
        }

    }
}
</style>

